<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>抚乐酒吧</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/index.css"/>
    <link rel="stylesheet" href="../styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }

        .app-i-manage-main {
            height: calc(100% - 64px);
        }

        .app-i-manage-main .divTmp {
            width: 100%;
            height: 100%;
        }

        h1 {
            text-align: center;
        }

        .el-table {
            border: 1px solid #ebeef5;
        }

        .el-table th,
        .el-table td {
            border: 1px solid #ebeef5;
        }

        .el-table--border {
            border: 1px solid #ebeef5;
        }

        .el-table--border th,
        .el-table--border td {
            border: 1px solid #ebeef5;
        }

        .top-btn {
            margin: 20px 0 20px 10%;
            display: flex;
            flex-direction: row;
        }

        .top-btn .right-img {
            margin-left: 20px;
        }

        .el-pagination {
            text-align: center;
            margin: 20px auto;
            display: block;
        }
    </style>
</head>

<body>
<div class="app-i-manage" id="app-i-manage">
    <h1>弹幕管理</h1>
    <div class="top-btn">
        <el-button type="primary" @click="goBack">返回首页</el-button>
        <el-upload
                class="upload-demo"
                action="/common/upload"
                :on-success="handleUploadSuccess"
                :before-upload="beforeUpload"
                :show-file-list="false">
            <el-button type="primary" class="right-img">上传图片</el-button>
        </el-upload>
    </div>
    <el-table :data="tableData" style="width: 80%;margin-left: 10%">
        <el-table-column prop="id" label="编号" width="180" align="center"></el-table-column>
        <el-table-column prop="image" label="图片" align="center">
            <template slot-scope="{ row }">
                <el-image style="width: 200px; height: auto; border:none;cursor: pointer;" :src="getImage(row.image)"
                          :preview-src-list="[ `/common/download?name=${row.image}` ]">
                    <div slot="error" class="image-slot">
                        <img src="./../images/noImg.png" style="width: auto; height: 40px; border:none;">
                    </div>
                </el-image>
            </template>
        </el-table-column>
        <el-table-column prop="uploadTime" label="操作时间" width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="prev, pager, next"
            :total="total">
    </el-pagination>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/manage.js"></script>
<script>
    new Vue({
        el: '#app-i-manage',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                total: 0
            }
        },
        created() {
            this.initData();
        },
        methods: {
            initData(page = 1) {
                getImagePage({page: page, pageSize: 10}).then(res => {
                    res = res.data;
                    if (res.code === 1) {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            handleUploadSuccess(response) {
                if (response.code === 1) {
                    addImage({image: response.data}).then(res => {
                        res = res.data
                        if (res.code === 1) {
                            this.$message({
                                message: '上传成功~~',
                                type: 'success'
                            });
                            this.initData(this.currentPage);
                        }
                    })
                } else {
                    this.$message.error(response.msg || '上传失败');
                }
            },
            beforeUpload(file) {
                const isImage = file.type.includes('image/');
                if (!isImage) {
                    this.$message.error('只能上传图片文件');
                }
                return isImage;
            },
            handleDelete(row) {
                this.$confirm('确定要删除这张图片吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteImageById(row.id).then(res => {
                        res = res.data;
                        console.log(res)
                        if (res.code === 1) {
                            this.initData(this.currentPage);
                            this.$message({
                                message: '删除成功~~',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('删除失败！！');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initData(val);
            },
            goBack() {
                window.location.href = '/backend/index.html';
            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
        }
    })
</script>
</body>
</html>
